<template>
  <div class="login-page flex-A">
    <div class="login-page-l">
      <img src="@/assets/img/login-img.png" alt="">
    </div>
    <div class="login-page-r">
      <div class="login-box">
        <div class="login-box-title">欢迎登录</div>
        <div class="login-box-tip">崇实易考智慧教育云平台</div>
        <div class="form-line">
          <img src="@/assets/icon/xm-icon.png" alt="">
          <el-input placeholder="请输入手机号" v-model="formData.mobile"></el-input>
        </div>
        <div class="form-line">
          <img src="@/assets/icon/sj-icon.png" alt="">
          <el-input placeholder="请输入随机码" v-model="formData.sjm"></el-input>
          <div class="sjm" @click="getAndomCode">{{andomCode}}</div>
        </div>
        <div class="form-line">
          <img src="@/assets/icon/mm-icon.png" alt="">
          <el-input placeholder="请输入验证码" v-model="formData.yzm"></el-input>
          <div class="yzm" v-if="andomCode !== formData.sjm.toUpperCase()">获取验证码</div>
          <div class="yzm1" v-show="showAuthBtn && andomCode == formData.sjm.toUpperCase()" @click="getCode">获取验证码</div>
          <div class="yzm2" v-show="!showAuthBtn">{{timerNum}}s</div>
        </div>
        <div class="btns">
          <el-button type="primary" :disabled="formData.yzm && formData.yzm.length==6 ? false : true" :loading="isLoading" @click="getLogin">登 录</el-button>
        </div>
        <div class="flex-A" style="margin-top: 10px; cursor: pointer;">
          <el-checkbox v-model="radio"></el-checkbox>
          <span style="margin-left: 10px" @click.stop="getUserAgreement(1)">用户协议和知识产权说明</span>
        </div>
      </div>
    </div>
    <el-dialog
        title="用户协议和知识产权说明"
        :visible.sync="isPop"
        :show-close="false"
        width="30%"
        center
        :before-close="handleClose">
      <div class="pop-box">
        一、协议概述
        本协议是您（用户）与[崇实易考](以下简称“我们”或“崇实易考”)之间关于使用崇实易考服务所订立的契约，具有法律约束力。请您在使用崇实易考前，务必认真阅读并充分理解本协议内容。您的登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
        二、账号申请
        申请资格:用户须具备完全民事行为能力，能够独立承担法律责任，并且已线下购买崇实易考服务。
        申请信息∶用户应提供真实、准确、完整的申请信息给与崇实易考管理员，并保证其有效性。如有变动，应及时更新。账号安全:用户应妥善保管自己的账号名和密码，对其账号下发生的所有行为负责。如发现任何非法使用情形，应立即通知崇实易考管理员。
        三、服务使用
        使用规范:用户在使用崇实易考服务时，应遵守国家法律法规、社会公德及本协议的相关规定。
        禁止行为︰包括但不限于编造、散布谣言和虚假信息，侵犯他人合法却笙
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isPop = false">取 消</el-button>
        <el-button type="primary" @click.stop="getUserAgreement(2)">同 意</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getCode, getUserInfo, login} from "@/api";
import watermark from "@/utils/watermark";

export default {
  name: "index",
  data() {
    return {
      andomCode: '',
      timerNum: 60,
      showAuthBtn: true,
      formData: {
        mobile: '',
        yzm: '',
        sjm: ''
      },
      isLoading: false,
      radio: false,
      isPop: false
    }
  },
  mounted() {
    this.getAndomCode()
    watermark.set('')
    // this.getPassWoed()
  },
  methods: {
    // 账号密码登录
    getPassWoed() {
      login({
        mobile: '13373463690',
        password: '123456'
      }).then(res => {
        if (res.code == 1) {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('user_id', res.data.user_id)
          this.getUserInfo()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 验证码倒计时
    sendTimer() {
      let that = this
      that.timerNum = 60
      var timeClock
      that.showAuthBtn = false
      timeClock = setInterval(function () {
        that.timerNum--
        if (that.timerNum == 0) {
          that.showAuthBtn = true
          clearInterval(timeClock)
          that.timerNum = ''
        }
      }, 1000)
    },
    handleClose () {
      this.isPop = false
    },
    // 登录
    getLogin() {
      if (!this.formData.mobile) {
        this.$message.warning('请输入手机号码！')
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.formData.mobile)) {
        this.$message.warning('手机号码有误,请重新填写！')
        return;
      }
      if (this.andomCode !== this.formData.sjm.toUpperCase()) {
        this.$message.warning('随机码输入不正确！')
        this.getAndomCode()
        return
      }
      if(!this.formData.yzm) {
        this.$message.warning('请输入短信验证码！')
        return;
      }
      if(!this.radio) {
        this.isPop = true
        return;
      }
      let params = {
        mobile: this.formData.mobile,
        code: this.formData.yzm
      }
      login(params).then(res => {
        if (res.code == 1) {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('user_id', res.data.user_id)
          this.getUserInfo()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
      let params = {
        source: 'h5'
      }
      getUserInfo(params).then(res => {
        if (res.code == 1) {
          localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
          this.$router.push({ path: '/' })
        }
      })
    },
    // 获取验证码
    getCode() {
      this.sendTimer()
      let params = {
        mobile: this.formData.mobile,
      }
      getCode(params).then(res => {
        if (res.code == 1) {
        } else {
          this.$message.error('获取验证码失败，请稍后重试！')
        }
      })
    },
    getUserAgreement(e) {
      if (e == 1) {
        this.isPop = true
      } else {
        this.isPop = false
        this.radio = true
      }
    },
    // 获取随机码
    getAndomCode() {
      this.andomCode = this.generateRandomCode(4)
    },
    generateRandomCode(length) {
      var result = '';
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // 可以根据需要改为小写字母或数字
      var charactersLength = characters.length;
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
      }
      return result;
    },
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100vh;
  .login-page-l {
    flex: 1;
    height: 100%;
    padding-left: 10px;
    img {
      width: 100%;
      height: 98%;
      margin: 1% 0;
    }
  }
  .login-page-r {
    flex: 1;
    .login-box {
      width: 363px;
      text-align: center;
      color: #333333;
      margin: 0 auto;
      .login-box-title {
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        font-size: 40px;
      }
      .login-box-tip {
        height: 50px;
        line-height: 50px;
        font-weight: 400;
        font-size: 20px;
      }
      .form-line {
        margin-top: 20px;
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 15px;
        border-radius: 8px;
        border: 1px solid #D9DCEA;
        img {
          width: 20px;
          height: 20px;
        }
        ::v-deep .el-input__inner {
          border: none!important;
        }
        .yzm {
          width: 120px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          padding-left: 20px;
          position: relative;
          cursor: pointer;
          &:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 10px;
            width: 1px;
            height: 13px; /* 边框高度 */
            background: #DCDCDC; /* 边框颜色 */
          }
        }
        .yzm1 {
          width: 120px;
          font-weight: 400;
          font-size: 14px;
          color: #3085FE;
          padding-left: 20px;
          position: relative;
          cursor: pointer;
          &:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 10px;
            width: 1px;
            height: 13px; /* 边框高度 */
            background: #DCDCDC; /* 边框颜色 */
          }
        }
        .yzm2 {
          width: 120px;
          font-weight: 400;
          font-size: 14px;
          color: #3085FE;
          padding-left: 20px;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            top: 3px;
            left: 10px;
            width: 1px;
            height: 13px; /* 边框高度 */
            background: #DCDCDC; /* 边框颜色 */
          }
        }
        .sjm {
          border: 1px dashed #DCDCDC;
          padding: 5px 15px;
          color: #0101FC;
          font-size: 18px;
          font-weight: 500;
          cursor: pointer;
          letter-spacing: 2px;
        }
      }
      .btns {
        width: 100%;
        margin-top: 30px;
        .el-button {
          width: 100%;
        }
      }
      .el-radio {
        margin-right: 0px!important;
      }
    }
  }
  .dialog-footer {
    .el-button {
      height: 30px;
      line-height: 0px;
    }
  }
  .pop-box {
    max-height: 400px;
    overflow-y: scroll;
  }
}
</style>
